{extend name="main"}
{block name="style"}
{css href="__PLUGIN_SRC__/Swiper/swiper.min.css"}
<style type="text/css">
	.text-white .el-tabs__item{color: #fff;}
	.el-tabs__nav-wrap::after{display: none;}
	.el-tabs__header{margin-bottom: 1px;}
	.rounded-0 .el-textarea__inner{border-radius: 0;}
	.find-border-top-0 .border-top:nth-of-type(1){border-top: 0;}
	.amap-info-content{padding: 10 !important;}
	.amap-info-close{display: none !important;}
</style>
{/block}
{block name="header"}
{include file="module/top_nav" container="container-xl"/}
{include file="module/header_concise"/}
{/block}
{block name="body"}
<div class="bg-424456">
	<div class="container-xl">
		<div class="flex py-3 flex-center">
			<div>
				<div class="bg-white w-80px h-80px text-truncate rounded-lg">
					<img src="{$Find.logo}" style="object-fit: contain;width: 100%;height: 100%;">
				</div>
			</div>
			<div class="flex-1 pl-3">
				<h5 class="text-white">{$Find.title}</h5>
				<div class="text-secondary">{$Find.finance}·{$Find.size_type}·{$Find.industry}</div>
			</div>
			<div class="text-center">
				<h5 class="text-white">{$Jobs->total()}个</h5>
				<div class="text-white">在招职位</div>
			</div>
			<div class="text-center pl-4">
				<h5 class="text-white">{$Find.delivery_resume}</h5>
				<div class="text-white">投递简历数</div>
			</div>
			<div class="text-center pl-4">
				<h5 class="text-white">{$Find.view}</h5>
				<div class="text-white">浏览量</div>
			</div>
			<div class="text-center pl-4">
				<h5 class="text-white">{$Find.resume_efficiency}<small>%</small></h5>
				<div class="text-white">简历处理率</div>
			</div>
			<div class="text-center pl-4">
				<h5 class="text-white">{$Find.online_time}</h5>
				<div class="text-white">企业最近登录</div>
			</div>
		</div>
		<div class="flex">
			<div class="pt-3 text-white">
				<el-tabs v-model="activeName">
				    <el-tab-pane label="公司主页" name="home"></el-tab-pane>
				    <el-tab-pane label="在招职位({$Jobs->total()})" name="jobs"></el-tab-pane>
				</el-tabs>
			</div>
			<div class="flex-1"></div>
			<div>
				<el-button type="info" round size="mini" icon="el-icon-star-on" @click="toggleCompanyCollection(Find)" v-if="Find.is_collection">取消关注</el-button>
				<el-button type="primary" round size="mini" icon="el-icon-star-off" @click="toggleCompanyCollection(Find)" v-if="!Find.is_collection">关注</el-button>
				{notempty name="Find.qr_code"}
				<el-popover
			    placement="bottom-end"
			    width="200"
			    trigger="hover">
			    <div class="p-2 text-center">
			    	<img src="{xycms:web name='imgurl'/}{$Find.qr_code}" width="140">
			    	<div class="small pt-2">微信“扫一扫”查看</div>
			    </div>
				<el-button type="danger" slot="reference" round size="mini" icon="el-icon-share">分享</el-button>
			  	</el-popover>
				{/notempty}
			</div>
		</div>
	</div>
</div>
<div class="container-xl py-3">
	<div class="flex flex-top">
		<div class="flex-1 shadow">
			<div class="bg-white" v-show="activeName=='home'">
				<div class="p-4">
					<div class="flex mb-3">
						<div class="flex-1 block-title-before pb-2">企业介绍</div>
					</div>
					<div class="text-secondary">{$Find.company_descript|raw}</div>
				</div>
				<div class="p-4">
					<div class="flex mb-3">
						<div class="flex-1 block-title-before pb-2">企业福利</div>
					</div>
					<div>
						{volist name="Find.corporate_welfare" id="v"}
						<el-tag type="success" size="mini">{$v}</el-tag>
						{/volist}
					</div>
				</div>
				<div class="p-4" v-if="amapConfig.status && amapConfig.js_status && Find.contacts_lng && Find.contacts_lat">
					<div class="flex mb-3">
						<div class="flex-1 block-title-before pb-2">公司地址</div>
					</div>
					<div id="map_container" style="width: 100%;height: 260px;"></div>
				</div>
				{notempty name="Find.development_history"}
				<div class="p-4">
					<div class="flex mb-3">
						<div class="flex-1 block-title-before pb-2">企业发展历程</div>
					</div>
					<el-timeline>
						{volist name="Find.development_history" id="v"}
					    <el-timeline-item timestamp="{$v.time}" placement="top">
					      <el-card>
					        <h6>{$v.title}</h6>
					        <p class="text-secondary mb-0">{$v.desc}</p>
					      </el-card>
					    </el-timeline-item>
					    {/volist}
					</el-timeline>
				</div>
				{/notempty}
				<div class="p-4">
					<div class="flex mb-3">
						<div class="flex-1 block-title-before pb-2">工商信息</div>
					</div>
					<div class="flex p-3 border rounded-lg flex-center">
						<div class="pr-3">
							<img src="{$Find.logo}" width="40" height="40" class="rounded-lg">
						</div>
						<div class="flex-1 text-secondary">该企业的信用信息可访问<a href="https://www.qichacha.com/search?key={$Find.title}" target="_blank" class="el-link el-link--primary is-underline"><span class="el-link--inner">企查查</span></a>进行查询</div>
					</div>
				</div>
			</div>
			<div class="find-border-top-0" v-show="activeName=='jobs'">
				{volist name="Jobs" id="v"}
				<div class="bg-white border-top">
					<div class="flex p-4">
						<div class="flex-1 pr-3">
							<a href="/jobs/{$v.id}.html" target="_blank">
								<div class="h6 text-0143B1">{$v.title}[{$v.jobs_city}]<span class="text-secondary ml-2 small">发布于{$v.friendly_create_time}</span></div>
							</a>
							<div class="h6 text-ec6334">
								{gt name="v.salary_min" value="0"}
								{eq name="v.jobs_salary_show_type" value="1"}
								{$v.salary_min}-{$v.salary_max}元
								{else/}
								{$v.salary_min}-{$v.salary_max}k
								{/eq}
								{gt name="v.salary_year" value="12"}
								{$v.salary_year}薪
								{/gt}
								{else/}
								面议
								{/gt}
								<span class="text-secondary ml-2 small">{$v.education}丨{$v.exp_level}</span>
							</div>
						</div>
						<div class="flex-1">
							<div class="h6">{$v.company_name}</div>
							<div class="text-secondary">{$v.industry}丨{$v.size_type}</div>
						</div>
						<div class="pl-3">
							{eq name="v.is_delivery" value="1"}
							<el-button type="info" size="small">已投递</el-button>
							{else/}
							<a href="/jobs/{$v.id}.html" class="d-none"
							id="jobs_id_{$v.id}">查看职位</a>
							<el-button type="primary" size="small"
							@click="window.open('/jobs/{$v.id}.html');">查看</el-button>
							{/eq}
							{eq name="v.is_collection" value="1"}
							<div class="text-center pt-3 pointer" @click="toggleJobsCollection({id:{$v.id},is_collection:1})"><i class="el-icon-star-on mr-1"></i>取消收藏</div>
							{else/}
							<div class="text-center pt-3 pointer" @click="toggleJobsCollection({id:{$v.id},is_collection:0})"><i class="el-icon-star-off mr-1"></i>收藏</div>
							{/eq}
						</div>
					</div>
				</div>
				{/volist}
				{notempty name="$Jobs->render()"}
				<div class="text-center mt-3 bg-white py-3">
					{$Jobs->render()|raw}
				</div>
				{/notempty}
			</div>
		</div>
		<div class="w-300px ml-3">
			<div v-show="activeName=='home'">
				{notempty name="Find.executives"}
				<div class="bg-white p-4 mb-3 shadow">
					<div class="flex mb-3">
						<div class="flex-1 block-title-before pb-2">高管介绍</div>
					</div>
					<div class="flex flex-center">
						<div class="pr-3">
							<img src="{$Find.executives_headimg}" width="60" height="60" class="rounded-circle">
						</div>
						<div class="flex-1">{$Find.executives}丨{$Find.executives_job_title}</div>
					</div>
					<div class="text-secondary mt-3">{$Find.executives_desc}</div>
				</div>
				{/notempty}
				<div class="bg-white p-4 mb-3 shadow">
					<div class="flex mb-3">
						<div class="flex-1 block-title-before pb-2">公司基本信息</div>
					</div>
					<div class="flex flex-center text-secondary pt-2">
						<div class="pr-3">性质</div>
						<div>{$Find.finance}</div>
					</div>
					<div class="flex flex-center text-secondary pt-2">
						<div class="pr-3">行业</div>
						<div>{$Find.industry}</div>
					</div>
					<div class="flex flex-center text-secondary pt-2">
						<div class="pr-3">规模</div>
						<div>{$Find.size_type}</div>
					</div>
					<div class="flex flex-center text-secondary pt-2">
						<div class="pr-3">地址</div>
						<div>{$Find.contacts_city}</div>
					</div>
				</div>
				{notempty name="CompanyDemeanor"}
				<div class="bg-white p-4 mb-3 shadow">
					<div class="flex mb-3">
						<div class="flex-1 block-title-before pb-2">公司风采</div>
					</div>
					<div class="swiper-container company-demeanor-container w-100 h-150px">
					    <div class="swiper-wrapper">
					    	{volist name="CompanyDemeanor" id="v"}
					      	<div class="swiper-slide text-truncate">
					      		<img src="{$v.url}" style="width: 100%;height: 100%;object-fit: cover;"
							      title="{$v.title}">
					      	</div>
					      	{/volist}
					    </div>
					</div>
				</div>
			  	{/notempty}
				<!-- <div class="bg-white p-4 mb-3">
					<div class="flex mb-3">
						<div class="flex-1 block-title-before pb-2">给我留言</div>
					</div>
					<el-form :model="messageForm">
					  <el-form-item>
					    <el-input 
					    v-model="messageForm.content" 
					    placeholder="请输入您的疑问。比如工作地点、年薪、福利等等，我会及时给您回复！期待与您合作！"
					    type="textarea"
						:autosize="{ minRows: 4, maxRows: 20}"
						class="rounded-0"></el-input>
					  </el-form-item>
					  <el-form-item class="text-right mb-0">
					    <el-button type="primary" class="rounded-0 px-5" size="small">发送</el-button>
					  </el-form-item>
					</el-form>
				</div> -->
			</div>
			<div class="bg-white p-4 mb-3 shadow" style="background-image: url(__TEMPLATE_STATIC__/down_resume_bg.png);background-size: 100% 100%;">
				<div class="text-center">
					<img src="/displayQrcode?scheme={xycms:web name='downUrl'}/company/{$Find.id}&icon=1" width="120" height="120">
					<div class="text-small text-secondary mt-2">在{xycms:web name="name"}APP中查看</div>
				</div>
			</div>
			{xycms:companylistbyrand name="crand" length="10"}
			<div class="bg-white p-4 shadow">
				<div class="flex mb-3">
					<div class="flex-1 block-title-before pb-2">看过该公司的人还看过</div>
				</div>
				{volist name="crand" id="v"}
				<div class="flex py-3 flex-center">
					<a href="/company/{$v.id}.html"
					target="_blank">
						<div class="bg-white w-60px h-60px text-truncate rounded-lg border">
							<img src="{$v.logo}" style="object-fit: contain;width: 100%;height: 100%;">
						</div>
					</a>
					<div class="flex-1 pl-3 text-secondary">
						<a href="/company/{$v.id}.html" class="pb-2 text-primary" target="_blank">{$v.title}</a>
						<div><a href="/jobs?company_id={$v.id}" class="text-primary" target="_blank">{$v.jobs_sum}</a>个招聘职位</div>
					</div>
				</div>
				{/volist}
			</div>
			{/xycms:companylistbyrand}
		</div>
	</div>
</div>
<div style="display: none;">
	<div ref="infoWindow">
		<div class="flex">
			<div v-if="Find.logo" class="pr-2">
				<img :src="Find.logo" height="60" width="60">
			</div>
			<div>
				<div class="h6">{{Find.title}}</div>
				<div class="text-secondary small">{{Find.contacts_tel}}</div>
				<div class="text-secondary small">{{Find.contacts_province}}{{Find.contacts_city}}{{Find.contacts_area}}{{Find.contacts_address}}</div>
			</div>
		</div>
	</div>
</div>
{/block}
{block name="footer"}
{include file="module/footer"/}
{include file="module/login"/}
{/block}
{block name="script"}
{js href="__PLUGIN_SRC__/Swiper/swiper.min.js"}
<script type="text/javascript">
	var amapConfig={
		status:{xycms:mapconfig name="status"/},
		server_status:{xycms:mapconfig name="server_status"/},
		js_status:{xycms:mapconfig name="js_status"/},
		js_key:'{xycms:mapconfig name="js_key"/}',
	};
	{empty name="Find"}
	var Find={};
	{else/}
	var Find={:json_encode($Find,JSON_UNESCAPED_UNICODE)};
	{/empty}
</script>
<script type="text/javascript">
	var map=null;
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			loginTabs:XYBase.loginTabs,
			userInfo:UserInfo,
			feedback:XYBase.feedback,
			activeName: 'home',
			amapConfig:amapConfig,
			Find:Find,
			messageForm:{
				content:''
			}
		},
		watch:{
		    view:XYBase.viewWatch,
		    loginTabs:XYBase.loginTabsWatch,
		},
		created(){
			XYBase.created(this);
		},
		methods:XYBase.methods({
		})
	});
	if (amapConfig.status && amapConfig.js_status && amapConfig.js_key && Find.contacts_lng && Find.contacts_lat) {
		var url = '//webapi.amap.com/maps?v=2.0&key='+amapConfig.js_key+'&callback=initAmap';
		var jsapi = document.createElement('script');
		jsapi.charset = 'utf-8';
		jsapi.src = url;
		document.head.appendChild(jsapi);
	}
	function initAmap() {
		var param={
               resizeEnable: true,
               zoom:15
            };
        if (Find.contacts_lng && Find.contacts_lat)
        	param.center=[parseFloat(Find.contacts_lng),parseFloat(Find.contacts_lat)];
	    map = new AMap.Map('map_container',param);
	    if (Find.contacts_lng && Find.contacts_lat)
	    	setInfoWindow([parseFloat(Find.contacts_lng),parseFloat(Find.contacts_lat)]);
	}
	function setInfoWindow(lnglat) {
	    infoWindow = new AMap.InfoWindow({
	        content: vm.$refs.infoWindow  //使用默认信息窗体框样式，显示信息内容
	    });
	    infoWindow.open(map, lnglat);
	    var bounds = map.getBounds();
      	map.setLimitBounds(bounds);
	}
	{notempty name="CompanyDemeanor"}
    var swiper = new Swiper('.company-demeanor-container', {
        loop:true,
        autoplay:true
    });
	{/notempty}
</script>
{/block}